<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  	<meta content="webkit" name="renderer" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <base href="<%=basePath%>">
    
    <title>基于WEB的人脸识别考勤系统——控制台</title>
    
	<!-- Bootstrap core CSS -->
    <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/style.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

	<link rel="stylesheet" href="layui/css/layui.css" media="all">
  </head>
  
  <body style="padding-top: 0px">
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    	<h1 class="page-header">可视化/<span class="text-muted"> Visualization</span></h1>
    	
    	已列出您任教的所有课程，演示请查看100005（Android开发高级技术）
	    <table class="layui-table">
		  <colgroup>
		    <col>
		    <col>
		    <col>
		    <col>
		    <col>
		    <col>
		    <col>
		    <col>
		    <col>
		  </colgroup>
		  <thead>
		    <tr>
		      <th>课程编号</th>
		      <th>课程名</th>
		      <th>专业</th>
		      <th>班级</th>
		      <th>开课时间</th>
		      <th>状态</th>
		      <th>总周数</th>
		      <th>排课数</th>
		      <th>操作</th>
		    </tr> 
		  </thead>
		  <tbody id="courseView">
		    
		  </tbody>
		</table>
		
    </div>
    
    <div id="recordView" style="display: none; padding-top: 10px;"></div>
    
    <script src="layui/layui.js"></script>
    <script src="js/jquery.min.js"></script>
    <script>
    var getRecordByCid;
    
    layui.use(['table', 'layer', 'laytpl', 'form'], function(){
    
    var table = layui.table;
	var layer = layui.layer;
	var laytpl = layui.laytpl;
	var form = layui.form;
    
    overloading();
    
    function overloading(){
	    $.ajax(
		{
			type:"post",
			url:"course/getCourseByTid.action",
			dataType:"json",
			success : function(result){
				// 渲染视图层
				var courseView = document.getElementById('courseView'); 
				var courseContent = document.getElementById('courseContent');
				laytpl(courseContent.innerHTML).render(result.data, function (html) {
					//赋值
					courseView.innerHTML = html;
				});
			}
		});
    }
    
    getRecordByCid = function getRecordByCid(cid,state,csnum){
  		if(state == '未开课'){
  			layer.msg('该课程未开课，不存在记录');
  		} else if(csnum==0){
  			layer.msg('该课程没有任何课程安排，不存在记录');
  		} else {
  			layer.msg('表格数据于新页面打开');
  			window.open("visual/recordTable.action?cid=" + cid);
  		}
    }
    
    });
    </script>
    <script type="text/html" id="courseContent">
	{{#  layui.each(d, function(index, item){ }}
	<tr>
		<td>{{ item.cid }}</td>
		<td>{{ item.cname }}</td>
		<td>{{ item.major }}</td>
		<td>{{ item.sclass }}</td>
		<td>{{ item.startdateStr }}</td>
		<td>{{ item.state }}</td>
		<td>{{ item.weeksum }}</td>
		<td>{{ item.csnum }}</td>
		<td><button class="layui-btn layui-btn-xs" onclick="getRecordByCid({{ item.cid }}, '{{ item.state }}', {{ item.csnum }})">记录可视化</button></td>
	</tr>
  	{{#  }); }}
  	{{#  if(d.length === 0){ }}
   	 无数据
  	{{#  } }}
	</script>
    
  </body>
</html>
